<template>
	<view class="page">
		<view class="cardInfo">
			<view class="cardStatus">
				{{cardInfo.card_status}}
			</view>
			<view class="content">
				<view class="cardNo">
					卡号：{{cardInfo.cardSn}}
				</view>
				<view class="type">
					类型 ： {{cardInfo.cardType=='01'? '一卡通' : ''}}
				</view>
			</view>
			<view :class="cardInfo.card_status == '正常' ? 'btn colorStyle2' : 'btn'" @click="handleCardType">
				{{cardInfo.card_status == '正常' ? '挂失' : cardInfo.card_status == '挂失' ? '解挂' : cardInfo.card_status}}
			</view>
		</view>
	</view>
</template>

<script>
	import {reportLossOrUnhookApi,geth5MemberApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				cardInfo:{
					card_status : '',
					cardSn : '',
					mainframeNo : '',
					cardType : ''
				},
				card_status:{
					'01': '白卡',
					'02': '正常',
					'03': '冻结',
					'04': '销卡',
					'05': '挂失',
				},
				selectInfoAccount:{}
			}
		},
		methods: {
			handleCardType(){
				let optionType = this.cardInfo.card_status=='正常' ? '1' : '2'
				reportLossOrUnhookApi({
					mainframeNo : this.cardInfo.mainframeNo,
					cardSn : this.cardInfo.cardSn,
					optionType 
				}).then(res=>{
					this.getRemberInfo().then(res=>{
						this.setMessage('操作成功')
					})
				})
			},
			getRemberInfo(){
				let selectInfoAccount = uni.getStorageSync('selectInfoAccount')
				return geth5MemberApi({
					memberId : selectInfoAccount.id ? selectInfoAccount.id : ''
				}).then(res=>{
					this.selectInfoAccount = res.data[0]
					uni.setStorageSync('selectInfoAccount',this.selectInfoAccount)
					this.initInfo()
				})
			},
			initInfo(){
				let info = uni.getStorageSync('selectInfoAccount')
				this.cardInfo.card_status = this.card_status[info.cardStatus]
				this.cardInfo.cardSn = info.cardSn
				this.cardInfo.mainframeNo = info.mainframeNo
				this.cardInfo.cardType = info.cardType
				console.log(this.cardInfo);
			}
		},
		onLoad() {
			this.initInfo()
			
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	.cardInfo{
		height: 190rpx;
		width: 100vw;
		border-bottom: 2rpx solid #e6e6e6;
		@include flexXCenter;
		padding: 0 20rpx;
		.cardStatus{
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			background-color: #159cd4;
			@include flexCenter;
			color: #fff;
		}
		.content{
			flex: 1;
			padding-left: 30rpx;
			.cardNo{
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.type{
				
			}
		}
		.btn{
			width: 150rpx;
			height: 60rpx;
			border-radius: 10rpx;
			color: #fff;
			background-color: #159cd4;
			@include flexCenter;
		}
		.colorStyle2{
			background-color: #fe6402 !important;
		}
	}
}
</style>
